// 当前这个gulpfile.js文件属于Gulp的配置文件 
// Gulp的工作模式是基于"任务"
// 处理JS是一种任务
// 处理CSS是一种任务
// 处理图片是一种任务
// 处理...是一种任务

// var gulp = require("gulp");
// 1 gulp.task() 用于定义任务 
// 2 gulp.src() 用于定位文件
// 3 gulp.src().pipe() 用于定义操作
// 4 gulp.dest() 用于输出文件
// 5 gulp.watch() 用于监听文件
// 6 gulp.series() 用于定义一系列同步任务 
// 7 gulp.parallel() 用于定义一系列异步任务


// 这些函数都可以单独调用
var { task, src, dest, watch, series, parallel } = require("gulp");
var htmlmin = require('gulp-htmlmin');
var sass = require("gulp-sass")(require('sass'));
var autoprefixer = require("gulp-autoprefixer")
var cssMin = require('gulp-cssmin')
var babel = require('gulp-babel')
var uglify = require('gulp-uglify')
var sourcemaps = require('gulp-sourcemaps')
var imagemin = require("gulp-imagemin")
var webserver = require('gulp-webserver')


// 压缩图片的任务
function doIMGS() {
    return src('./src/imgs/*.*')
        .pipe(imagemin())
        .pipe(dest('./dist/imgs'))

}
// 压缩HTML的插件叫做 gulp-htmlmin
function doHTML() {
    // 定位文件
    return src("./src/**/*.html")
        // 定义操作
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(dest('./dist'))
}

// 处理CSS
function doCSS() {
    return src(["./src/css/*.scss", "!./src/css/common.scss"])
        // 第一个处理操作 转为CSS  模块名称： gulp-sass  需要额外下载 sass模块
        .pipe(sass())
        // 第二个处理操作 添加浏览器前缀 模块名称： gulp-autoprefixer
        .pipe(autoprefixer({  // 执行一个自动添加前缀的任务
            overrideBrowserslist: ['last 2 versions']  // 这个参数是指兼容最近的两个浏览器版本
        }))
        // 第三个处理操作 压缩CSS
        .pipe(cssMin())
        .pipe(dest('./dist/css'))
}

// 处理JS
function doJS() {
    return src("./src/js/*.js")
        .pipe(sourcemaps.init())
        .pipe(babel({ // 在压缩之前要进行转码
            presets: ['@babel/env'] // 需要一个参数
        }))
        .pipe(uglify()) // 压缩 
        // 生成map文件
        .pipe(sourcemaps.write('.'))
        .pipe(dest('./dist/js'))
}

// 搬运libs目录
function moveLibs() {
    return src('./src/libs/**/*.*')
        .pipe(dest('./dist/libs'))
}

var doAll = parallel([doJS, doHTML, doCSS, doIMGS, moveLibs])

function doWatch() {
    watch('./src', doAll)
}

function doServer() {
    return src('dist')
        .pipe(webserver({
            port: 8080,
            host: "localhost",
            open: true,
            fallback: "/html/list.html",
            proxies: [
                // {  配置固定的接口
                //     source: "/lession01/demo",
                //     target: "http://10.30.162.196:3000/lession01/demo"
                // },
                // 批量配置接口
                {
                    source: "/lession01/",
                    target: "http://localhost:3000/lession01/"
                },
                {
                    source: '/lession05/',
                    target: "http://localhost:3000/lession05"
                }
            ]
        }))
}

module.exports.moveLibs = moveLibs;
module.exports.doJS = doJS;
module.exports.doHTML = doHTML;
module.exports.doCSS = doCSS;
module.exports.doIMGS = doIMGS;
module.exports.doAll = doAll
module.exports.doWatch = doWatch
module.exports.doServer = doServer;
// 以前的定义任务的写法
// task("default",  function () {
//     console.log("任务执行了")
// })

// 现在定义任务也可以直接写函数 然后将该函数暴露出去
// async function fun() {
//     console.log(123)
// }

// module.exports.default = fun;